<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8" />

    <title>Demo Chat</title>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <style>
        body {
            padding:20px;
        }
        #console {
            height: 400px;
            overflow: auto;
        }
        .username-msg {color:orange;}
        .connect-msg {color:green;}
        .disconnect-msg {color:red;}
        .send-msg {color:#888}
    </style>


    <script src="js/socket.io/socket.io.js"></script>
    <script src="js/moment.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script>

        var userId = 'user' + Math.floor((Math.random()*1000)+1);

        var socket =  io.connect('http://localhost:9092?userId='+userId);

        socket.on('connect', function() {
            output('<span class="connect-msg">Client has connected to the server!</span>');
        });

        socket.on('chatevent', function(ret) {
            console.log(ret);
            var data = ret.data;
            var message = data.message;
            if(data.chatType=='GROUP_TO_SINGLE'){

                var userList = data.receiveUserList;
                var userName = '';
                for(i=0;i<userList.length;i++){
                    userName = '@'+userList[i].userName+' '
                }
                output('<span class="username-msg">' + data.userName + ':</span> ' + userName + message);
            }else{
                output('<span class="username-msg">' + data.userName + ':</span> ' + message);
            }

        });
        socket.on('messageevent', function(data) {
            output('<span class="send-msg">管理员发送消息：</span>'+data);
        });
        socket.on('disconnect', function() {
            output('<span class="disconnect-msg">The client has disconnected!</span>');
        });

        function sendDisconnect() {
            socket.disconnect();
        }

        function sendMessage() {
            var message = $('#msg').val();
            if(!message){
                return;
            }
            $('#msg').val('');
            var sendId = $('#sendId').val();
            $('#sendId').val('');
            var chatType = $('#chatType').val();
            if(!chatType){
                chatType = 'GROUP';
            }
            $('#chatType').val('GROUP');
            var jsonObject = {
                chatType: chatType,
                userId: userId,
                receiveUserIdList:[sendId],
                message: message
            };
            socket.emit('chatevent', jsonObject);
        }

        function output(message) {
            var currentTime = "<span class='time'>" +  moment().format('HH:mm:ss.SSS') + "</span>";
            var element = $("<div>" + currentTime + " " + message + "</div>");
            $('#console').prepend(element);
        }

        $(document).keydown(function(e){
            if(e.keyCode == 13) {
                $('#send').click();
            }
        });
    </script>
</head>

<body>

<h1>Netty-socketio Demo Chat</h1>

<br/>

<div id="console" class="well">
</div>

<form class="well form-inline" onsubmit="return false;">
    <input id="msg" class="input-xlarge" type="text" placeholder="input msg"/>
    <input id="sendId" class="input-xlarge" type="text" placeholder="input sendId"/>
    <select id="chatType">
        <option value="GROUP" selected>GROUP</option>
        <option value="GROUP_TO_SINGLE">GROUP_TO_SINGLE</option>
        <option value="SINGLE">SINGLE</option>
    </select>
    <button type="button" onClick="sendMessage()" class="btn" id="send">Send</button>
    <button type="button" onClick="sendDisconnect()" class="btn">Disconnect</button>
</form>



</body>

</html>
